<div *ngIf="activeProduct?.length > 0">
  <h6>{{ unit.name }} 生产:</h6>
  <clr-datagrid class="datagrid-compact">
    <clr-dg-column [clrDgField]="'product.name'">名称</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="prodSorter">比率</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="totalProdSorter">总计</clr-dg-column>
    <clr-dg-row *clrDgItems="let product of activeProduct">
      <clr-dg-cell>
        <a [routerLink]="'/home/res/' + product.product.id">
          {{ product.product.name }}
        </a>
      </clr-dg-cell>
      <clr-dg-cell>
        <span [class.text-danger]="product.ratio.lt(0)" class="monospace">
          <app-formatted-quantity [quantity]="product.prodPerSec">
          </app-formatted-quantity>
        </span>
      </clr-dg-cell>
      <clr-dg-cell>
        <span [class.text-danger]="product.ratio.lt(0)" class="monospace">
          <app-formatted-quantity
            [quantity]="product.prodPerSec.times(unit.quantity)"
          >
          </app-formatted-quantity>
        </span>
      </clr-dg-cell>
      <clr-dg-row-detail *clrIfExpanded>
        <app-bonus-view [production]="product"></app-bonus-view>
      </clr-dg-row-detail>
    </clr-dg-row>

    <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
        {{ pagination.totalItems }}
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>
</div>

<div *ngIf="activeProducer?.length > 0">
  <h6>{{ unit.name }} 的制作材料:</h6>
  <clr-datagrid class="datagrid-compact">
    <clr-dg-column [clrDgField]="'producer.name'">名称</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="prodSorter">比率</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="totalProdSorter">总产量</clr-dg-column>

    <clr-dg-row *clrDgItems="let producer of activeProducer">
      <clr-dg-cell>
        <a [routerLink]="'/home/res/' + producer.producer.id">
          {{ producer.producer.name }}
        </a>
      </clr-dg-cell>
      <clr-dg-cell>
        <span [class.text-danger]="producer.ratio.lt(0)" class="monospace">
          <app-formatted-quantity [quantity]="producer.prodPerSec">
          </app-formatted-quantity>
        </span>
      </clr-dg-cell>
      <clr-dg-cell>
        <span [class.text-danger]="producer.ratio.lt(0)" class="monospace">
          <app-formatted-quantity
            [quantity]="producer.prodPerSec.times(producer.producer.quantity)"
          >
          </app-formatted-quantity>
        </span>
      </clr-dg-cell>

      <clr-dg-row-detail *clrIfExpanded>
        <app-bonus-view [production]="producer"></app-bonus-view>
      </clr-dg-row-detail>
    </clr-dg-row>

    <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
        {{ pagination.totalItems }}
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>
</div>
